<script setup lang='ts'>

const props = withDefaults(defineProps<{
  color: string
  changeSize: (newSize: string) => void,
  size?: string
  btnType?: 'success' | 'danger' | 'warning'
}>(), {
  size: 'mini',
  btnType: 'success'
})
console.log(props.color)

const emit = defineEmits<{
  (e: 'changeColor', color: string): void
  (e: 'changeSize', size: string): void
}>()

const onBtnClick = () => {
  emit('changeColor', '好白呀')
}
// const props = defineProps<{
//   color: string
//   size?: string
// }>()
// console.log(props.color)

</script>

<template>
  <div style="border: 10px solid red; width: 300px; height: 50px;">
    子组件 -{{ color }} -- {{ size }} --- {{ btnType }}
    <button @click="onBtnClick">修改颜色</button>
    <button @click="emit('changeSize', 'bigger')">修改尺寸-a</button>
    <button @click="changeSize('middle')">修改尺寸-b</button>
  </div>
</template>

<style scoped></style>
